<template>
  <div class="stereotypeTableList  h100">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :showPagination="true"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth:'60px', fixed:true }"
        :scrollX="1200"
        :getPopupContainer="$commonFun.getPopupContainer"
      >
        <template slot="createTime" slot-scope="text">
          <table-ellipsis
            :tableEllipsisIsTurnLine="false"
            :text="text ? $options.filters.moment(text) : '_'">
          </table-ellipsis>
        </template>
        <span slot="operation" slot-scope="text, record" class="tableOperateSty">
          <template>
            <auth-button @click="copy(record)" :auth="managePerms.modelStyle.add" type="primary" :ghost="true" size="small"><i class="iconfont icon-fuzhi"/>{{ $t('copy') }}</auth-button>
            <auth-button @click="handleEdit(record.id)" :auth="managePerms.modelStyle.edit" type="primary" :ghost="true" size="small"><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
            <auth-button @click="deleteList(record)" style="word-break: keep-all;" :auth="managePerms.modelStyle.delete" type="danger" :ghost="true" size="small"><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
          </template>
        </span>
      </s-table>
  </div>
</template>
<script>
import { managePerms } from '@/config/permission/index'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import AuthText from '@/components/AuthText'
import { stereotypeTbColumns } from '../config/list'
import STable from '@/components/Table/index'
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    STable,
    tableEllipsis,
    AuthText,
    AuthButton
  },
  data () {
    return {
      managePerms,
      columns:[...stereotypeTbColumns],
      selectedRowKeys: [],
    }
  },
  computed:{
    ...mapState({
      queryParam: state => state.modelStyle.queryParam
    }),
  },
  mounted(){
    this.$store.dispatch('getSaleAreaDictCodeData');
    this.$store.dispatch('getConfigModelDataFromDictCodeData')
    this.$store.dispatch('getPlatformDictCodeData')
  },
  methods: {
    refreshData (isToFirstPage = true) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    },
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      // const JnqueryParam = vm.queryParam
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      // JnqueryParam.modelIds = [JnqueryParam.modelId];
      this.tableData = [];
      this.selectedRows = [];
      this.selectedRowKeys = [];
      this.$emit('tableReload')
      const apiPromise = vm.$api.getModelStyleList({...parameter, ...JnqueryParam});
      return new Promise((resolve) => {
        return apiPromise.then((res) => {
          if (res.data) {
            this.tableData = res.data;
          }
          resolve(res);
        });
      });
    },
    // onTableSelectChange(selectedRowKeys) {
    //   this.selectedRowKeys = selectedRowKeys;
    //   this.selectedRows = selectedRowKeys.map(item => {
    //     return this.tableData.find(row => row.id === item);
    //   }).filter(row => row)
    // },
    // 删除款型
    deleteList (records, sucCallback) {
      if (!(records instanceof Array)) {
        records = [records];
      }
      const vm = this
      this.$confirm({
        title: vm.$t('systemTip'),
        content: vm.$t('删除后无法恢复，确定要删除 "__Content__" 吗？').replace('__Content__', records[0].productionSeries + '-' + records[0].productionModel),
        // content: vm.$t('deleteVehicleTip').replace('__CONTENT__', '（' + records.map(record => record.vin).join('、') + '）'),
        class: 'confirmStyle',
        width: 378,
        onOk () {
          vm.$api.deleteModelStyle({ ids: records.map(record => record.id) }).then(() => {
            vm.$message.success(vm.$t('successfullyDelete'))
            if(sucCallback && typeof sucCallback === 'function'){
              sucCallback();
            }
            vm.refreshData(false) // 刷新页面
          })
        },
        onCancel () { }
      })
    },
    // 表格选择更改
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectedRowchange', selectedRows)
    },
    // 复制
    copy (recordData = {}) {
      // let {id, ...data} = recordData;
      // this.handleAddEdit(this.$commonFun.deepCopy(data));
      this.$emit('handleCopy', recordData.id)
    },
    handleEdit(data){
      this.$emit('handleEdit', data)
    }
  }
}
</script>
<style scoped lang="less">

</style>
